import type { FC } from 'react';
import style from './index.less';
import React, { Fragment, useState, useEffect } from 'react';
import Header from './components/Header';
import Article from './components/Article';
import PraiseYou from './components/PraiseYou';
import YouPraise from './components/YouPraise';
import Column from './components/Column';
import Achievement from './components/Achievement';
import { Tabs } from 'antd';
import Attention from './components/Attention';
import {
  CopyOutlined,
  LikeOutlined,
  ThunderboltOutlined,
  ClusterOutlined,
  EyeOutlined,
  SubnodeOutlined
} from '@ant-design/icons';
import Collect from './components/Collect';
import Count from './components/Count';
import GoHome from '@/components/GoHome';
interface Props {}
const { TabPane } = Tabs;
const Mine: FC<Props> = () => {
  const tabs = [
    {
      id: 1,
      name: (
        <span>
          <CopyOutlined />
          文章
        </span>
      ),
      component: <Article />,
    },
    {
      id: 2,
      name: (
        <span>
          <LikeOutlined />
          你的点赞
        </span>
      ),
      component: <YouPraise/>,
    },
    {
      id: 6,
      name: (
        <span>
          <SubnodeOutlined />
          你的收藏
        </span>
      ),
      component: <Collect />,
    },
    {
      id: 4,
      name: (
        <span>
          <ClusterOutlined />
          专栏
        </span>
      ),
      component: <Column />,
    },
    // {
    //   id: 5,
    //   name: (
    //     <span>
    //       <EyeOutlined />
    //       关注的社区
    //     </span>
    //   ),
    //   component: <Attention />,
    // },

  ];
  return (
    <div className={style.container}>
      <div className={style.left}>
      <GoHome />

      </div>
      <div className={style.main}>
        <Header />
        <div className={style.tab_con}>
          <Tabs
            // 正常来说 key最好别用中文，我这里为了方便key都是中文。
            // defaultActiveKey 默认选中的key
            defaultActiveKey={'全部'}
            // 选择其他Tab
            onChange={key => {}}
            style={{ marginTop: '10px', paddingLeft: '10px' }}
          >
            {/*  渲染Tabs */}
            {tabs.map((item, index) => (
              // 如果type的值是空 展示 '全部'
              <TabPane tab={item.name} key={item.id}>
                {item.component}
              </TabPane>
            ))}
          </Tabs>
        </div>
      </div>
      <div className={style.right}>
        <Achievement />
        <Count />
      </div>
    </div>
  );
};

export default Mine;
